<template>
  <div class="about">
    <div class="card">
      <h1 class="text-3xl font-bold mb-6">关于项目</h1>
      
      <div class="content">
        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">项目简介</h2>
          <p class="mb-4">
            这是一个基于 Vue 3 和 Vite 构建的现代化前端项目模板。
            它集成了最新的前端技术栈，提供了良好的开发体验和代码规范。
          </p>
        </section>

        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">技术栈</h2>
          <ul class="tech-list">
            <li><strong>Vue 3:</strong> 渐进式JavaScript框架</li>
            <li><strong>Vite:</strong> 下一代前端构建工具</li>
            <li><strong>Vue Router:</strong> 官方路由管理器</li>
            <li><strong>Pinia:</strong> Vue 3 状态管理库</li>
            <li><strong>Axios:</strong> HTTP客户端库</li>
            <li><strong>ESLint + Prettier:</strong> 代码规范和格式化</li>
          </ul>
        </section>

        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">项目结构</h2>
          <div class="code-block">
            <pre>
src/
├── components/     # 可复用组件
├── views/         # 页面组件
├── stores/        # Pinia状态管理
├── router/        # 路由配置
├── utils/         # 工具函数
└── assets/        # 静态资源
            </pre>
          </div>
        </section>

        <div class="actions mt-8">
          <router-link to="/" class="btn btn-primary">
            返回首页
          </router-link>
          <button @click="showAlert" class="btn btn-secondary">
            测试交互
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const showAlert = () => {
  alert('这是一个 Vue 3 Composition API 的示例！')
}
</script>

<style scoped>
.about {
  max-width: 800px;
  margin: 0 auto;
}

.content {
  line-height: 1.8;
}

.tech-list {
  list-style: none;
  padding: 0;
}

.tech-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.tech-list li:last-child {
  border-bottom: none;
}

.code-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  font-family: 'Fira Code', Monaco, 'Cascadia Code', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
}

.actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
</style> 